<template>
  <view class="section-h management-plan">
    <page-header></page-header>
    <view class="plan">
      <view class="title">{{ report.reportName }}</view>
      <view class="tips">管理方案为健康建议，不能替代医嘱及药物</view>
      <view class="content">
        {{ report.reportSummary }}
      </view>
    </view>
    <view class="bottom-button-wrapper">
      <button @tap="gotoSuggestionPage" class="report-button">方案解读</button>
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import * as repostService from "../../../services/report-service";
import PageHeader from "../../../common-components/page-header";
import "./index.less";

export default {
  components: {
    pageHeader: PageHeader
  },
  data() {
    return {
      report: {
        result: "", // 报告正文
        title: "", // 报告标题
        type: "",
        pageId: 0, // 生成报告的问卷 ID
        id: 0, // 报告 ID
        items: [] // 建议
      }
    };
  },
  methods: {
    gotoSuggestionPage() {
      let pageId = Taro.getCurrentInstance().router.params.pageId;
      Taro.navigateTo({
        url: `/pages/health-questionnaire/suggestion/index?pageId=${pageId}`
      });
    }
  },
  async created() {
    const pageId = Taro.getCurrentInstance().router.params.pageId;
    const result = await repostService.getReportByQuestionnaireId(pageId);
    this.report = result.data.data.details
  }
};
</script>

<style lang="less">
@import "src/styles/colors";
.report-content {
  background: #e5e5e5;
  border-radius: 32px;
  padding: 32px;
}
.report-button {
  background: @purple100;
  color: white;
  border-radius: 32px;
}
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  bottom: 0;
}
.bottom-button-wrapper {
  padding: 48px 0 96px 0;
}
</style>
